<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>哈哈哈哈哈</p>
    <div>乐乐乐乐乐乐饿饿了</div>
    <div>乐乐乐乐乐乐饿饿了</div>
    <div>乐乐乐乐乐乐饿饿了</div>
    <div>乐乐乐乐乐乐饿饿了</div>
    <ul class="ul1" id="uls">
        <li class="box">1</li>
        <li class="box">2</li>
        <li class="box">3</li>
        <li class="box">4</li>
        <li class="box">5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <h2 id="title">idididiididiid</h2>
    <!-- <h2 id="title">jjjjjjjjjjjjjjj</h2> -->
    <script>
        // js对网页的操作
        document.write('哈哈哈')
        document.write('<h1>哈哈哈</h1>')

        // 获取head节点
        console.log(document.head);
        // 获取body
        console.log(document.body);
        

        console.dir(document)

            // 获取dom元素
            // 通过标签名的方式来获取
            let div = document.getElementsByTagName('div')
            console.log(div);
            // 通过类名的方式获取 htmlcollection dom元素集合  动态集合
            let box = document.getElementsByClassName('box')
            console.log(box);
            // 通过id来获取
            let title = document.getElementById('title')
            console.log(title);

            // 通过css选择器的方式选中元素
            // 获取单个元素，如有重复取第一个
            let div1 = document.querySelector('div')
            console.log(div1)
            let box1 = document.querySelector('.box')
            console.log(box1)
            let title1 = document.querySelector('#title')
            console.log(title1)
            // 获取多个元素 他的集合格式nodelist  静态集合
            let divs = document.querySelectorAll('div')
            console.log(divs)
            let bosx = document.querySelectorAll('.box')
            console.log(bosx)
            let titles = document.querySelectorAll('#title')
            console.log(titles)
            console.log('------------');
            
            let ul1 = document.querySelectorAll('ul')
            console.log(ul1,'ul1');
            
            let ul2 = document.getElementsByTagName('ul')
            console.log(ul2,'ul2');

            let ul = document.createElement('ul')
            ul.innerHTML = 445566

            document.body.appendChild(ul)

            console.log(ul1,'ul11');
            console.log(ul2,'ul22');


        

       
        




    </script>
</body>
</html>